<template>
  <div class="bg">
    <h2>数据看板：</h2>
    <div class="dis-flex">
      <div class="box">
        账户总余额:
        <div class="money">{{info.totalMoney}}</div>
      </div>
    </div>
    <div class="line"></div>
    <div class="dis-flex">
      <span class="box">
        商户今日总订单:
        <div class="money">{{info.totalOrder}}</div>
      </span>
      <span class="box">
        商户今日总收款:
        <div class="money">{{info.totalInMoney}}</div>
      </span>
      <span class="box">
        商户今日总收款:
        <div class="money">{{info.totalOutMoney}}</div>
      </span>
    </div>
    <div class="line"></div>

    <div class="dis-flex">
      <span class="box">
        充值利润:
        <div class="money">{{info.outMoney}}</div>
      </span>
      <span class="box">
        提现利润:
        <div class="money">{{info.outMoney}}</div>
      </span>
    </div>
  </div>
</template>

<script>
import { getProfit } from "@/api/login";

export default {
  name: "Dashboard",
  data() {
    return {
      info: {
        totalMoney: 0,
        totalOrder: 0,
        inMoney: 0,
        outMoney: 0,
        totalOutMoney: 0,
        totalInMoney: 0
      }
    };
  },
  methods: {
    getData() {
      getProfit().then(res => {
        if (res.data.code === 200) {
          this.info = res.data.data;
        }
      });
    }
  },
  created() {
    this.getData();
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
h2 {
  margin: 20px 20px 20px 0;

  span {
    margin: 0 25px 0 0;
  }

  strong {
    font-size: 1.5em;
  }
}
.bg {
  background-color: #eee;
  padding: 20px;
}
.dis-flex {
  display: flex;
  .box {
    padding: 20px;
    margin-right: 20px;
    font-size: 15px;
    background-color: #fff;
  }
}
.line{
  height: 20px;
}
.money{
  color: #ea1d43;
  margin: 5px 0 0 0;
  font-size: 25px;
}
</style>

